<template>
    <!-- components/radio1/index.wxml -->
    <view>
        <van-grid :column-num="columnNum" :gutter="gutter" :border="false">
            <van-grid-item
                content-class="section_item_root"
                @click="onItemChange($event, { item, index })"
                :data-item="item"
                :data-index="index"
                :use-slot="true"
                v-for="(item, index) in sections"
                :key="index"
            >
                <view :class="checkedIndexClone == index ? 'section_content_active section-active-class' : 'section_content section-class'">
                    <view class="section_label">
                        {{ item.label }}
                    </view>
                    <image v-if="checkedIndexClone == index" class="checked_icon" src="/static/resource/image/checked.png"></image>
                    <view v-else></view>
                </view>
            </van-grid-item>
        </van-grid>
    </view>
</template>

<script>
// components/radio1/index.js
export default {
    data() {
        return {
            checkedIndexClone: ''
        };
    },
    externalClasses: ['section-active-class', 'section-class'],
    props: {
        /**
         * 选项内容
         */
        sections: {
            type: Array,
            default: () => []
        },
        /**
         * 一列数量
         */
        columnNum: {
            type: Number,
            default: 3
        },
        /**
         * item间的间距
         */
        gutter: {
            type: Number,
            default: 6
        },
        /**
         * 选项item高度
         */
        itemHeight: {
            type: Number,
            default: 72
        },
        /**
         * 选中index
         */
        checkedIndex: {
            type: Number,
            default: 0
        }
    },
    methods: {
        onItemChange(e, _dataset) {
            /* ---处理dataset begin--- */
            this.handleDataset(e, _dataset);
            /* ---处理dataset end--- */
            let item = e.currentTarget.dataset.item;
            let index = e.currentTarget.dataset.index;
            this.setData({
                checkedIndexClone: index
            });
            this.$emit('onRadioChange', {
                detail: {
                    item: item,
                    index: index
                }
            });
        }
    },
    created: function () {},
    watch: {
        checkedIndex: {
            handler: function (newVal, oldVal) {
                this.checkedIndexClone = newVal;
            },

            immediate: true
        }
    }
};
</script>
<style>
@import './index.css';
</style>
